var handler = null;
var page = 1;
var isLoading = false;
var board_id = board_id || "";
var category_id = category_id || "";
var user_id = user_id || "";
var q = q || "";
//var apiURL = "<%= @api%>";

// Prepare layout options.
var options = {
    autoResize: true, // This will auto-update the layout when the browser window is resized.
    container: jQuery('#ColumnContainer'), // Optional, used for some extra CSS styling
    offset: 15, // Optional, the distance between grid items
    itemWidth: 222 // Optional, the width of a grid item
};

/*
 * When scrolled all the way to the bottom, add more tiles.
 */
function onScroll(event){
    // Only check when we're not still waiting for data.
    if (!isLoading) {
        // Check if we're within 100 pixels of the bottom edge of the broser window.
        var closeToBottom = (jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height() - 100);
        if (closeToBottom) {
            loadData();
        }
    }
};

/*
 * Refreshes the layout.
 */
function applyLayout(){
    // Clear our previous layout handler.
    if (handler) {
        handler.wookmarkClear();
    }
    // Create a new layout handler.
    handler = jQuery('#ColumnContainer div.pin');
    handler.wookmark(options);
};

/*
 * Loads data from the API.
 */
function loadData(){
    isLoading = true;
    jQuery('#loading').show();
    jQuery.ajax({
        url: apiURL,
        dataType: 'json',
        data: {
            page: page,
            board_id: board_id,
            category_id: category_id,
			user_id: user_id,
			q: q
        }, // Page parameter to make sure we load new data
        success: onLoadData
    });
};

/*
 * Receives data from the API, creates HTML for images and updates the layout
 */
function onLoadData(data){
    isLoading = false;
    jQuery('#loading').hide();
    // Increment page index for future calls.
    page++;
    // Create HTML for the images.
    var html = '';
    var i = 0, length = data.length, image;
    for (; i < length; i++) {
        obj = data[i];
        html += "<div class=\"pin\">";
        html += "<div class=\"PinHolder\">";
        html += "<div class=\"actions\">";
        //html += "<a href=\"/pin/repin/1/\" data-id=\"#\" class=\"Button Button12 WhiteButton ContrastButton repin_link\"><em></em>转采</a>";
        if (obj.is_like == true) {
            html += "<a href='#' data_id=\"" + obj.id + "\" onclick=\"new Ajax.Request('/pin/" + obj.like_action + "/" + obj.id + "', {asynchronous:true, evalScripts:true}); return false;\" class=\"Button WhiteButton ContrastButton Button12 likebutton\">" + obj.like_btn + "</a>";
        }
        else {
            html += "<a class=\"Button Button12 WhiteButton ContrastButton\" href=\"/pin/edit/" + obj.id + "\"\>编辑</a>";
        }
        html += "<a href=\"/pin/item/" + obj.id + "#comments\" class=\"Button Button12 WhiteButton ContrastButton comment\"><em></em>评论 </a>";
        html += "</div>";
        html += "<a class=\"PinImage ImgLink\" href=\"/pin/item/" + obj.id + "\"><img" + " height='" + Math.round(obj.height / obj.width * 192) + "' class=\"PinImageImg\" alt=\"Toaster Teapot\" src=\"" + obj.media + "\"></a>";
        html += "</div>";
        html += "<p class=\"description\">";
        html += obj.description;
        html += "</p>";
        html += "<p class=\"stats colorless\">";
        html += "<span class=\"LikesCount\">" + obj.link_count + " 喜欢</span>";
        html += "<span class=\"CommentsCount\">" + obj.comment_count + " 评论</span>";
        html += "</p>";
        html += "<div class=\"convo attribution clearfix\">";
        html += "<a class=\"ImgLink\" title=\"" + obj.user_name + "\" href=\"/user/account/" + obj.user_id + "\" \"><img alt=\"" + obj.user.name + "\" src=\"/images/avatar/noAvatar.jpg\"></a>";
        html += "<p>";
        html += "<a href=\"/user/account/" + obj.user_id + "\">" + obj.user.name + "</a>";
        html += " 采集到 <a href=\"/board/item/" + obj.board_id + "\">" + obj.board_title + "</a>";
        html += "</p>";
        html += "</div>"
        html += "</div>";
    }
    // Add image HTML to the page.
    jQuery('#ColumnContainer').append(html);
    // Apply layout.
    applyLayout();
};

jQuery(document).ready(new function(){
    // Capture scroll event.
    jQuery(document).bind('scroll', onScroll);
    // Load first data from the API.
    loadData();
});
